<?php slot('sub', $sub); ?>

<div class="center">
    <div id="center_conteiner" class="clearfix">
        <div class="center_sub_conteiner">

            <div class="center_block">
                <div class="header_center_block">
                    <span>Add new city</span>
                    <div class="back_button"><a href="<?php echo url_for('acity'); ?>">Back</a></div>
                </div>
                
                <div class="center_line" id="add_new_city_country">
                    <div class="field_label">Country</div>
                    <select class="field_select">
                        <?php foreach ($country as $c) {
                            echo "<option value='".$c->getId()."'>".$c->getNameEn()."</option>";
                        } ?>
                    </select>
                </div>
                
                <div class="center_line" id="add_new_city_region">
                    <div class="field_label">Region</div>
                    <select class="field_select"></select>
                </div>
                
                <div class="center_line" id="add_new_city_en">
                    <div class="field_label">Name in English</div>
                    <input type="text" class="field_input">
                </div>
                
                <div class="center_line"  id="add_new_city_ru">
                    <div class="field_label">Name in Russian</div>
                    <input type="text" class="field_input">
                </div>
                
                <div class="center_line" id="add_new_city_he">
                    <div class="field_label">Name in Hebrew</div>
                    <input type="text" class="field_input">
                </div>
                
                <div class="center_line" id="add_new_city_priority">
                    <div class="field_label">Priority</div>
                    <select class="field_select">
                        <option value="10">Very small</option>
                        <option value="20">Small</option>
                        <option value="30" selected="selected">Normal</option>
                        <option value="40">High</option>
                        <option value="50">Very high</option>
                    </select>
                </div>
                
                <div class="center_line">
                    <div class="field_button_positive" id="add_new_city_save">Save</div>
                    <div class="field_button_negative" id="add_new_city_cancel"><a href="<?php echo url_for('acity'); ?>">Cancel</a></div>
                </div>
                                
            </div>
        </div>
    </div>
</div>

<script  type="text/javascript">
    var regions = [];

<?php foreach ($region as $r) { ?>
        var temp = {
            id: '<?php echo $r->getId() ?>',
            nameEn: '<?php echo $r->getNameEn() ?>',
            country_id: '<?php echo $r->getCountryId() ?>'
        };

        regions.push(temp);
<?php } ?>

    $(function() {
        insertRegion($('#add_new_city_country select').val());

        var countryId = 0;
        $('#add_new_city_country select').change(function() {
            countryId = $(this).val();
            insertRegion(countryId);
        });
    });

    function insertRegion(country_id) {
        $('#add_new_city_region select option').remove();
        var parentSelect = $('#add_new_city_region select');
        var firstOption = '<option value="0">Select region</option>';
        (parentSelect).append(firstOption);

        $.each(regions, function(i, v) {
            if (parseInt(country_id) === 0) {
                    (parentSelect).append('<option value="' + v.id + '">' + v.nameEn + '</option>');
            } else {
                if (parseInt(v.country_id) === parseInt(country_id)) {
                    (parentSelect).append('<option value="' + v.id + '">' + v.nameEn + '</option>');
                }
            }
        });
    }
</script>